/**
 * 动画顺序演示 - 展示正确和错误的动画顺序
 * 
 * 用于理解为什么打开/关闭动画的代码顺序很重要
 */

import React, {useState, useRef} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Modal,
} from 'react-native';

export const AnimationOrderDemo: React.FC = () => {
  const [showCorrect, setShowCorrect] = useState(false);
  const [showWrong, setShowWrong] = useState(false);

  const correctOpacity = useRef(new Animated.Value(0)).current;
  const wrongOpacity = useRef(new Animated.Value(0)).current;

  // ✅ 正确的打开动画顺序
  const openCorrect = () => {
    console.log('✅ 正确顺序：1. 先设置状态为 true');
    setShowCorrect(true); // 先渲染组件
    
    console.log('✅ 正确顺序：2. 然后启动动画');
    Animated.timing(correctOpacity, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start(() => {
      console.log('✅ 正确顺序：3. 动画完成');
    });
  };

  // ❌ 错误的打开动画顺序（演示用）
  const openWrong = () => {
    console.log('❌ 错误顺序：1. 先启动动画');
    Animated.timing(wrongOpacity, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start(() => {
      console.log('❌ 错误顺序：3. 动画完成（但用户看不到）');
    });

    console.log('❌ 错误顺序：2. 然后设置状态为 true');
    setShowWrong(true); // 动画已经执行完了
  };

  // ✅ 正确的关闭动画顺序
  const closeCorrect = () => {
    console.log('✅ 正确顺序：1. 先启动动画');
    Animated.timing(correctOpacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start(() => {
      console.log('✅ 正确顺序：2. 动画完成后设置状态为 false');
      setShowCorrect(false);
    });
  };

  // ❌ 错误的关闭动画顺序（演示用）
  const closeWrong = () => {
    console.log('❌ 错误顺序：1. 先设置状态为 false');
    setShowWrong(false); // 组件立即卸载
    
    console.log('❌ 错误顺序：2. 然后尝试启动动画（但组件已卸载）');
    Animated.timing(wrongOpacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start(() => {
      console.log('❌ 错误顺序：3. 这个回调可能不会执行');
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>🔬 动画顺序实验</Text>
      
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>✅ 正确的顺序</Text>
        <Text style={styles.description}>
          打开时：先设置 visible=true，再启动动画{'\n'}
          关闭时：先启动动画，在回调中设置 visible=false
        </Text>
        <TouchableOpacity
          style={[styles.button, styles.correctButton]}
          onPress={openCorrect}
        >
          <Text style={styles.buttonText}>打开（正确）</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>❌ 错误的顺序</Text>
        <Text style={styles.description}>
          打开时：先启动动画，再设置 visible=true{'\n'}
          结果：看不到动画，Modal 直接出现
        </Text>
        <TouchableOpacity
          style={[styles.button, styles.wrongButton]}
          onPress={openWrong}
        >
          <Text style={styles.buttonText}>打开（错误）</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.note}>
        <Text style={styles.noteTitle}>💡 技术原理</Text>
        <Text style={styles.noteText}>
          <Text style={styles.bold}>打开动画：</Text>需要先渲染 Modal 组件，
          动画值才能绑定到视图上，动画才能生效。
        </Text>
        <Text style={styles.noteText}>
          <Text style={styles.bold}>关闭动画：</Text>需要保持 Modal 渲染状态，
          让动画播放完毕后再卸载，否则用户看不到动画。
        </Text>
      </View>

      {/* ✅ 正确实现的 Modal */}
      <Modal transparent visible={showCorrect}>
        <View style={styles.modalContainer}>
          <TouchableOpacity 
            style={styles.overlay}
            onPress={closeCorrect}
            activeOpacity={1}
          />
          <Animated.View 
            style={[
              styles.modalContent,
              styles.correctModal,
              {opacity: correctOpacity}
            ]}
          >
            <Text style={styles.modalTitle}>✅ 正确的动画</Text>
            <Text style={styles.modalText}>
              你应该看到了淡入动画
            </Text>
            <TouchableOpacity
              style={[styles.button, styles.correctButton]}
              onPress={closeCorrect}
            >
              <Text style={styles.buttonText}>关闭（有动画）</Text>
            </TouchableOpacity>
          </Animated.View>
        </View>
      </Modal>

      {/* ❌ 错误实现的 Modal */}
      <Modal transparent visible={showWrong}>
        <View style={styles.modalContainer}>
          <TouchableOpacity 
            style={styles.overlay}
            onPress={closeWrong}
            activeOpacity={1}
          />
          <Animated.View 
            style={[
              styles.modalContent,
              styles.wrongModal,
              {opacity: wrongOpacity}
            ]}
          >
            <Text style={styles.modalTitle}>❌ 错误的动画</Text>
            <Text style={styles.modalText}>
              你应该没有看到淡入动画{'\n'}
              Modal 直接出现了
            </Text>
            <TouchableOpacity
              style={[styles.button, styles.wrongButton]}
              onPress={closeWrong}
            >
              <Text style={styles.buttonText}>关闭（无动画）</Text>
            </TouchableOpacity>
          </Animated.View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F5F7FA',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1A1A1A',
    marginBottom: 20,
    textAlign: 'center',
  },
  section: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  description: {
    fontSize: 14,
    color: '#666666',
    lineHeight: 20,
    marginBottom: 12,
  },
  button: {
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  correctButton: {
    backgroundColor: '#4CAF50',
  },
  wrongButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
  note: {
    backgroundColor: '#E3F2FD',
    borderRadius: 12,
    padding: 16,
    borderWidth: 1,
    borderColor: '#2196F3',
  },
  noteTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1565C0',
    marginBottom: 8,
  },
  noteText: {
    fontSize: 14,
    color: '#1976D2',
    lineHeight: 22,
    marginBottom: 8,
  },
  bold: {
    fontWeight: 'bold',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    width: '80%',
    padding: 24,
    borderRadius: 16,
    alignItems: 'center',
  },
  correctModal: {
    backgroundColor: '#E8F5E9',
    borderWidth: 2,
    borderColor: '#4CAF50',
  },
  wrongModal: {
    backgroundColor: '#FFEBEE',
    borderWidth: 2,
    borderColor: '#F44336',
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  modalText: {
    fontSize: 14,
    textAlign: 'center',
    marginBottom: 20,
    lineHeight: 20,
  },
});

